import React, { Component } from 'react';
import style from './index.module.scss'
import { collectGoodApi, ChangecollectGoodApi } from '@/api/Details'
import { Toast } from 'antd-mobile'
import {
    StarOutline, StarFill, SendOutline, ShopbagOutline
} from 'antd-mobile-icons'
import { addGoodsToCartApi } from '@/api/Details'
import { withRouter } from 'react-router-dom';
import { NavLink } from 'react-router-dom/cjs/react-router-dom.min';
class Index extends Component {
    state = {
        show: false
    }

    // 点击收藏
    getCollectGood = () => {
        if (!this.state.show) {
            // 收藏
            collectGoodApi({
                goodid: this.props.id,
                userid: sessionStorage.getItem('userid'),
            }).then(res => {
                if (res.data.code === 200) {
                    this.setState({
                        show: true
                    })
                    Toast.show({
                        content: '收藏成功',
                    })
                }
            })

        } else {
            // 取消收藏
            ChangecollectGoodApi({
                goodid: this.props.id,
                userid: sessionStorage.getItem('userid'),
            }).then(res => {
                if (res.data.code === 200) {
                    this.setState({
                        show: false
                    })
                    Toast.show({
                        content: '取消收藏',
                    })
                }
            })


        }

    }
    // 跳转购物车
    toCart = () => {

        this.props.history.push('./Carts')
    }
    // 点击加入购物车
    getGoodsCart = () => {
        console.log("0");
        addGoodsToCartApi({
            goodid: this.props.id,
            userid: sessionStorage.getItem('userid')
        }).then(res => {
            console.log(res.data);
            if (res.data.code === 200) {
                Toast.show({
                    content: '添加购物车成功',
                })
            }
        })
    }

    render() {
        return (
            <div className={style.subBoxs}>
                <div className={style.box1} onClick={this.getCollectGood}>
                    {
                        this.state.show ? <StarFill fontSize={18} /> : <StarOutline fontSize={18} />
                    }
                    <span>收藏</span>
                </div>
                <div className={style.box1}>
                    <SendOutline fontSize={18} />
                    <span>分享</span>
                </div>
                <NavLink to='/Carts' replace>
                    <div className={style.box1} >
                        <ShopbagOutline fontSize={18} />
                        <span>购物车</span>
                    </div>
                </NavLink>
                <div className={style.box4}>
                    <span className={style.span1} onClick={this.getGoodsCart}>加入购物车</span>
                    <span className={style.span2}>立即购买</span>
                </div>
            </div>
        );
    }
}

export default withRouter(Index);